/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size));
    vertical-align: top;
    inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
    max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size));
    min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size));
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
    position: relative;
}

.label,
.percentage {
    text-align: start;
    line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
    color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
    margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text));
    margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar));
}

.label:lang(ja),
.label:lang(ko),
.label:lang(zh),
.percentage:lang(ja),
.percentage:lang(ko),
.percentage:lang(zh) {
    line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk));
}

.label {
    flex: 1;
}

.percentage {
    align-self: flex-start;
    margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
}

.track {
    inline-size: 100%;
    block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
    border-radius: var(--spectrum-progressbar-corner-radius);
    background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
    overflow: hidden;
}

.fill {
    block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
    background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
    border: none;
    transition: width 1s;
}

:host([indeterminate]) .fill {
    inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate));
    animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate));
    will-change: transform;
    animation-name: indeterminate-loop-ltr;
    animation-duration: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate));
    animation-iteration-count: infinite;
    position: relative;
}

:host([indeterminate]) .fill:dir(rtl),
:host([dir="rtl"][indeterminate]) .fill {
    animation-name: indeterminate-loop-rtl;
}

:host([side-label]) {
    flex-flow: row;
    justify-content: space-between;
    display: inline-flex;
}

:host([side-label]) .track {
    flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
}

:host([side-label]) .label {
    flex-grow: 0;
    margin-block-end: 0;
    margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
}

:host([side-label]) .percentage {
    text-align: end;
    order: 3;
    margin-block-end: 0;
    margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
}

:host([static-color="white"]) .fill {
    background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
}

:host([static-color="white"]) .fill,
:host([static-color="white"]) .label,
:host([static-color="white"]) .percentage {
    color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
}

:host([static-color="white"]) .track {
    background: var(--spectrum-progressbar-track-color-white);
}

@keyframes indeterminate-loop-ltr {
    0% {
        transform: translate(calc(var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)) * -1));
    }

    to {
        transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)));
    }
}

@keyframes indeterminate-loop-rtl {
    0% {
        transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate)));
    }

    to {
        transform: translate(calc(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)) * -1));
    }
}

@media (forced-colors: active) {
    .track {
        --highcontrast-progressbar-fill-color: ButtonText;
        --highcontrast-progressbar-track-color: ButtonFace;
        forced-color-adjust: none;
        border: 1px solid ButtonText;
    }
}
